<template>
  <div class="container">
    <a-modal
      v-model:visible="visible"
      @ok="handleOk"
      centered
      :width="800"
      :footer="null"
      zIndex="9999"
    >
      <swiper
        :modules="modules"
        :slides-per-view="1"
        :space-between="50"
        navigation
        @swiper="setControlledSwiper"
        @slideChange="onSlideChange"
        :activeIndex="8"
        :footer="null"
      >
        <swiper-slide v-for="(item, index) in swiperList" :key="index">
          <div class="swiper_item">
            <video
              controls
              v-if="item.scene_type == 'video'"
              :src="item.material_url"
              style="width: 600px; height: 500px"
            ></video>
            <img
              alt=""
              style="object-fit: cover"
              v-else
              :src="item.material_url"
            />
          </div>
        </swiper-slide>
      </swiper>

      <a-row type="flex" justify="center" style="margin-top: 30px">
        <a-button type="primary" shape="round" @click="closeMask">
          <template #icon>
            <CloseOutlined style="margin-right: 5px" />
          </template>
          退出预览
        </a-button>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  ref,
  toRefs,
  nextTick,
  onMounted,
} from "vue";
import {
  CloseOutlined,
  LeftCircleOutlined,
  RightCircleOutlined,
  LeftOutlined,
  RightOutlined,
} from "@ant-design/icons-vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
export default defineComponent({
  components: {
    CloseOutlined,
    LeftCircleOutlined,
    RightCircleOutlined,
    Swiper,
    SwiperSlide,
    LeftOutlined,
    RightOutlined,
  },
  props: {
    urlList: {
      type: Object,
    }, //父组件传递的图片地址
  },
  setup() {
    const state = reactive({
      visible: false,
      swiperList: [],
      currentIndex: 0,
    });
    // 打开弹窗
    const showMask = (info, index) => {
      console.log(index, "子");
      state.swiperList = info || [];
      state.currentIndex = index; //获取当前高亮轮播图的索引
      state.visible = true;
      mySwiperRef.value &&
        mySwiperRef.value.slideTo(state.currentIndex, 500, false);
    };
    // 关闭弹窗
    const closeMask = () => {
      state.visible = false;
    };
    // 轮播图实例
    const mySwiperRef = ref(null);
    // 获取并存放swiper实例
    const setControlledSwiper = (swiper) => {
      console.log(state.currentIndex);
      mySwiperRef.value = swiper;
      // 设置当前播放的轮播图实例
      mySwiperRef.value.slideTo(state.currentIndex, 500, false);
    };
    return {
      ...toRefs(state),
      showMask,
      closeMask,
      modules: [Navigation, Pagination],
      mySwiperRef,
      setControlledSwiper,
    };
  },
});
</script>

<style lang="less" scoped>
.swiper {
  .swiper-slide {
    height: 500px;
    width: 600px;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    .swiper_item {
      height: 500px;
      width: 600px;
      background: black;
      video {
        height: 500px;
        width: 600px;
      }
      img {
        max-height: 100%;
        max-width: 100%;
        width: 100%;
        height: inherit;
      }
    }
  }
}
</style>
